<template name="goodGuarantee">
	<view class="classEnsure" @tap="toPage" :data-url="initInfo.refund">
		<text class="title">保障</text>
		<view class="itemBox">
			<view class="ensureItem" v-for="(item,index) in protectList" :key="index">
				<block v-if="item.name=='不支持退款'">
					<text class="iconfont icon-yuanxingxuanzhong red"></text>
					<text class="red">{{item.name}}</text>
				</block>
				<block v-else>
					<text class="iconfont icon-yuanxingxuanzhong"></text>
					<text>{{item.name}}</text>
				</block>
				
			</view>
		</view>
		<text class="iconfont icon-right"></text>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	
	export default{	
		name:'goodGuarantee',		//组件名称
		// 传递参数
		computed: {
			...mapState({
				initInfo:state=>state.sys.initInfo
			})
		},
		props:{
			protectList:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		// 组件参数
		data(){
			return {
				
			}
		},
		// 组件方法
		methods:{
			
		}
	}
</script>

<style lang="less" scoped>
	.classEnsure {
		background-color: #FFFFFF;
		padding: 20upx 28upx;
		margin-bottom: 13upx;
		display: flex;
		align-items: baseline;
	
		.title {
			font-size: 30rpx;
			color: #2c2c2c;
			margin-right: 30upx;
		}
	
		.itemBox {
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;
	
			.ensureItem {
				display: flex;
				align-items: center;
				margin-right: 12upx;
	
				>text {
					font-size: 24upx;
					color: #2c2c2c;
				}
	
				.iconfont {
					font-size: 32upx;
					margin-right: 6upx;
				}
				.red{
					color: #fe305b;
					
				}
			}
		}
	}
	
</style>
